@import "../../common/less/theme";

.goods {
	.g-header {
		position       : fixed;
		top            : 0;
		left           : 0;
		width          : 100%;
		display        : flex;
		justify-content: center;
		height         : 88rpx;
		z-index        : 10;

		.h-middle {
			display: flex;

			.m-item {
				position   : relative;
				display    : flex;
				align-items: center;
				color      : #666;

				&:not(:first-child) {
					margin-left: 34rpx;
				}

				&-active {
					text {
						color: #aa8a59;
					}

					&::after {
						position     : absolute;
						content      : '';
						bottom       : 0;
						left         : 0;
						width        : 100%;
						height       : 0;
						border-bottom: 3rpx solid #aa8a59;
					}
				}
			}
		}

		.h-right {
			position : absolute;
			top      : 50%;
			right    : 27rpx;
			transform: translateY(-50%);
			display  : flex;

			button {
				display        : flex;
				align-items    : center;
				justify-content: center;
				width          : 60rpx;
				height         : 60rpx;
				border-radius  : 30px;
				background     : RGBA(0, 0, 0, .1);

				text {
					font-size: 40rpx;
					color    : white;
				}

				&:after {
					border: none;
				}

				&:first-child {
					margin-right: 30rpx;
				}
			}
		}
	}

	.g-banner {
		swiper {
			height: 750rpx;

			.b-image {
				height: 100%;

				image {
					width : 100%;
					height: 100%;
				}
			}
		}
	}

	.g-seckill {
		display        : flex;
		justify-content: space-between;
		height         : 120rpx;
		background     : url(../../static/image/goods-seckill-bg.png) center no-repeat;
		background-size: 100% 100%;

		.s-left {
			display     : flex;
			align-items : center;
			padding-left: 150rpx;

			.l-amount {
				position: relative;

				.a-now {
					position : absolute;
					top      : 50%;
					left     : 50%;
					transform: translate(-50%, calc(-50% - 15rpx));

					text {
						font-size  : 40rpx;
						font-weight: 600;
						color      : white;
					}
				}

				.a-before {
					position : absolute;
					top      : 50%;
					left     : 50%;
					transform: translate(-50%, calc(-50% + 15rpx));

					text {
						font-size: 25rpx;
						color    : white;
					}

					&:after {
						position  : absolute;
						content   : '';
						top       : 50%;
						left      : 50%;
						transform : translate(-50%, calc(-50% + 10rpx));
						width     : 100%;
						height    : 3rpx;
						background: white;
					}
				}
			}
		}

		.s-right {
			display      : flex;
			align-items  : center;
			padding-right: 30rpx;

			.r-countdown {
				display       : flex;
				flex-direction: column;
				align-items   : center;

				.c-title {
					text {
						font-size: 30rpx;
						color    : #f71471;
					}
				}

				.c-time {
					display    : flex;
					align-items: center;

					.t-item {
						display        : flex;
						align-items    : center;
						justify-content: center;
						flex-basis     : 36rpx;
						height         : 36rpx;
						border-radius  : 5rpx;
						background     : #f71471;

						text {
							font-size: 24rpx;
							color    : white;
						}

						&:not(:first-child) {
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}

	.g-info {
		padding      : 28rpx;
		margin-bottom: 10rpx;
		background   : white;

		.i-name {
			text {
				font-size  : 34rpx;
				font-weight: 600;
				color      : #333;
			}
		}

		.i-desc {
			padding: 20rpx 0;

			text {
				color: #666;
			}
		}

		.i-price {
			.price-pay {
				display    : flex;
				align-items: flex-end;

				text {
					&:nth-child(1) {
						color: @primary-color;
					}

					&:nth-child(2) {
						font-size  : 40rpx;
						font-weight: 600;
						color      : @primary-color;
					}
				}
			}
		}
	}

	.g-count {
		margin-bottom: 10rpx;
		background   : white;

		.g-cell {
			display   : flex;
			min-height: 80rpx;
			padding   : 0 28rpx;

			.c-left {
				display    : flex;
				align-items: center;
				flex-basis : 93rpx;

				text {
					color: #666;
				}
			}

			.c-mid {
				display    : flex;
				align-items: center;
				flex       : 1;
			}

			.c-right {
				display        : flex;
				justify-content: flex-end;
				align-items    : center;
				flex-basis     : 40rpx;

				text {
					font-size: 24rpx;
					color    : #666;
				}
			}
		}
	}

	.g-attr {
		margin-bottom: 10rpx;
		background   : white;

		.g-cell {
			display   : flex;
			min-height: 80rpx;
			padding   : 0 28rpx;

			.c-left {
				display    : flex;
				align-items: center;
				flex-basis : 93rpx;

				text {
					color: #666;
				}
			}

			.c-mid {
				display    : flex;
				align-items: center;
				flex       : 1;

				.no-stock {
					padding-left: 20rpx;
					color       : #845d32;
				}
			}

			.c-right {
				display        : flex;
				justify-content: flex-end;
				align-items    : center;
				flex-basis     : 40rpx;

				text {
					font-size: 24rpx;
					color    : #666;
				}
			}
		}
	}

	.g-instruction {
		margin-bottom: 10rpx;
		background   : white;

		.g-cell {
			display   : flex;
			min-height: 80rpx;
			padding   : 0 28rpx;

			.c-left {
				display    : flex;
				align-items: center;
				flex-basis : 93rpx;

				text {
					color: #666;
				}
			}

			.c-mid {
				display    : flex;
				align-items: center;
				flex       : 1;

				.instruction {
					padding: 20rpx 0;

					.i-item {
						display: flex;

						.eosfont {
							font-size: 32rpx;
							color    : #ab8959;
						}

						.text {
							padding-left: 5rpx;
							color       : #333;
						}

						&:not(:first-child) {
							padding-top: 20rpx;
						}
					}
				}
			}

			.c-right {
				display        : flex;
				justify-content: flex-end;
				align-items    : center;
				flex-basis     : 40rpx;

				i {
					font-size: 24rpx;
					color    : #666;
				}
			}
		}
	}

	.g-evaluate {
		margin-bottom: 10rpx;

		.e-header {
			display        : flex;
			justify-content: space-between;
			align-items    : center;
			height         : 99rpx;
			padding        : 0 28px;
			background     : white;

			.h-left {
				display    : flex;
				align-items: center;

				text {
					font-weight: 600;
					color      : #333;
				}
			}

			.h-right {
				display    : flex;
				align-items: center;
				color      : #aa8a59;

				text {
					font-size: 24rpx;
				}
			}
		}

		.e-content {
			background: white;

			.c-wrap {
				white-space: nowrap;

				.w-item {
					display    : inline-block;
					width      : 620rpx;
					height     : 352rpx;
					margin-left: 28rpx;

					.e-card {
						height    : 100%;
						box-sizing: border-box;
						padding   : 28rpx;
						background: #f8f8f8;

						.c-user {
							display    : flex;
							align-items: center;

							.u-avatar {
								display: inline-block;
								height : 70rpx;
								width  : 70rpx;

								image {
									width        : 100%;
									height       : 100%;
									border-radius: 50%;
								}
							}

							.u-name {
								padding: 0 15rpx;
							}

							.u-star {
								display    : flex;
								align-items: center;

								image {
									width : 30rpx;
									height: 30rpx;
								}
							}
						}

						.c-text {
							padding-top: 28rpx;

							text {
								white-space: normal;
								color      : #333;
							}
						}
					}

					&:last-child {
						margin-right: .373rem;
					}
				}
			}
		}

		.e-footer {
			display        : flex;
			justify-content: center;
			align-items    : center;
			height         : 99rpx;
			background     : white;
			color          : #aa8a59;

			text {
				font-size: 24rpx;
			}
		}
	}

	.g-details {
		margin-bottom: 115rpx;
		background   : white;

		.d-tab {
			display        : flex;
			align-items    : center;
			justify-content: center;
			height         : 83rpx;

			.t-item {
				text {
					color: #666;
				}

				&:not(:first-child) {
					margin-left: 88rpx;
				}

				&-active {
					text {
						font-weight: 700;
						color      : #aa8a59;
					}
				}
			}
		}

		.d-content {
			.c-item {
				image {
					display: block;
					width  : 100%;
					height : 200rpx;
				}
			}
		}
	}

	.g-footer {
		position  : fixed;
		bottom    : 0;
		left      : 0;
		display   : flex;
		height    : 115rpx;
		width     : 100%;
		box-sizing: border-box;
		padding   : 0 28rpx;
		background: white;

		.f-left {
			display        : flex;
			justify-content: space-around;
			flex           : 1;

			.l-item {
				display        : flex;
				flex-direction : column;
				align-items    : center;
				justify-content: center;
				color          : #666;

				.iconfont {
					font-size: 40rpx;
				}
			}
		}

		.f-right {
			display        : flex;
			align-items    : center;
			justify-content: flex-end;
			width          : 450rpx;

			.r-item {
				display        : flex;
				align-items    : center;
				justify-content: center;
				width          : 200rpx;
				height         : 68rpx;
				border-radius  : 34rpx;

				text {
					color: white;
				}

				&-seckill {
					background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
				}

				&-buy {
					background: #b60a0a;
				}

				&-cart {
					background: @primary-color;
				}

				&:nth-child(2) {
					margin-left: 10rpx;
				}
			}
		}
	}

	.g-count-panel {
		min-height: 700rpx;
		padding   : 0 27rpx;
		background: white;

		.p-goods {
			display    : flex;
			align-items: center;
			padding    : 27rpx 0;

			.g-image {
				flex-basis: 127rpx;
				height    : 127rpx;

				image {
					height: 100%;
					width : 100%;
				}
			}

			.g-info {
				display        : flex;
				flex-direction : column;
				justify-content: center;
				padding-left   : 20rpx;

				.i-name {
					text {
						font-size: 28rpx;
					}
				}

				.i-price {
					text {
						font-size  : 34rpx;
						font-weight: 600;
						color      : #b6090b;
					}
				}
			}
		}

		.p-section {
			.s-title {
				display    : flex;
				align-items: center;
				height     : 62rpx;

				text {
					font-size: 28rpx;
					color    : #666;
				}
			}

			.s-content {
				padding: 20rpx 0;
			}
		}
	}

	.g-attr-panel {
		min-height: 700rpx;
		padding   : 0 27rpx;
		background: white;

		.p-goods {
			display    : flex;
			align-items: center;
			padding    : 27rpx 0;

			.g-img {
				flex-basis: 127rpx;
				height    : 127rpx;

				image {
					height: 100%;
					width : 100%;
				}
			}

			.g-info {
				display        : flex;
				flex-direction : column;
				justify-content: center;
				padding-left   : 20px;

				.i-name {
					text {
						font-size: 28rpx;
					}
				}

				.i-price {
					text {
						font-size  : 34rpx;
						font-weight: 600;
						color      : #b6090b;
					}
				}
			}
		}

		.p-section {
			.s-title {
				display    : flex;
				align-items: center;
				height     : 62rpx;

				text {
					font-size: 28rpx;
					color    : #666;
				}
			}

			.s-content {
				display: flex;
				padding: 20rpx 0;

				text {
					flex-grow    : 0;
					height       : 50rpx;
					line-height  : 50rpx;
					padding      : 0 22rpx;
					margin       : 0 20rpx 20rpx 0;
					box-sizing   : border-box;
					border-radius: 5rpx;
					border       : 1rpx solid #ededed;
					font-size    : 28rpx;
					color        : #666;

					&.active {
						border    : none;
						background: #845d32;
						color     : white;
					}
				}
			}
		}
	}
}